<template>
    <div class="login-page">
        <!-- 背景橙色大圆圈 -->
        <div class="orange"></div>
        <!-- 背景蓝色大圆圈 -->
        <div class="blue"></div>
        <!-- 背景蓝色小圆圈 -->
        <div class="blue small"></div>
        <div class="login-box">
            <div class="logo-box">
                <div class="right">
                    <div class="sys-name">
                        在线OJ系统后台管理
                    </div>
                    <div class="sys-sub-name">
                        用于微服务项目测试、开发、练习
                    </div>
                </div>
            </div>
            <div class="form-box">
                <!-- 输入账号 -->
                <div class="form-item">
                    <img src="../assets/images/shouji.png" alt="账号图片">
                    <el-input v-model="userAccount" placeholder="请输入账号" />
                </div>
                <!-- 输入密码 -->
                <div class="form-item">
                    <img src="../assets/images/yanzhengma.png" alt="密码图片">
                    <el-input v-model="password" type="passworld" placeholder="请输入密码" show-password />
                </div>
                <div class="submit-box" @click="loginfunc">
                    登录
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//import { ref } from 'vue'
//import { ElMessage } from 'element-plus'

import SysUserService from '@/apis/sysuser-service';
import CookikService from '@/utils/cookie-service';
import router from '@/router';

const userAccount = ref('')
const password = ref('')

async function loginfunc() {
    try {
        const loginResult = await SysUserService.login(userAccount.value, password.value); // 使用 `.value` 访问 ref 的实际值
        CookikService.setToken(loginResult.data)
        router.push("/oj/layout/question"); // 跳转到系统页面
        console.log("登录成功");
    }
    catch (error) {
        // 捕获请求或其他执行过程中出现的错误
        console.error("登录请求发生错误:", error.message);
        ElMessage.error(error.message); // 显示错误信息
    }
}

</script>

<style lang="scss" scoped>
.login-page {
    width: 100vw;
    /* 设置页面宽度为100%的视口宽度 */
    height: 100vh;
    /* 设置页面高度为100%的视口高度 */
    position: relative;
    /* 相对定位 */
    overflow: hidden;
    /* 隐藏溢出的部分 */

    .login-box {
        width: 456px;
        /* 设置登录框的宽度 */
        height: 404px;
        /* 设置登录框的高度 */
        background: #FFFFFF;
        /* 设置背景为白色 */
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
        /* 添加阴影效果 */
        border-radius: 10px;
        /* 设置圆角 */
        opacity: 0.9;
        /* 设置透明度 */
        position: absolute;
        /* 绝对定位 */
        top: 50%;
        /* 设置距离顶部50% */
        left: 50%;
        /* 设置距离左边50% */
        transform: translate(-50%, -50%);
        /* 使其居中 */
        z-index: 2;
        /* 设置层级 */
        padding: 0 72px;
        padding-top: 50px;

        /* logo 区域样式 */
        .logo-box {
            display: flex;
            align-items: center;
            margin-bottom: 30px;

            img {
                width: 68px;
                height: 68px;
                margin-right: 16px;
            }

            .sys-name {
                font-size: 24px;
                color: #222222;
                font-weight: 600;
                line-height: 33px;
                margin-bottom: 13px;
            }

            .sys-sub-name {
                font-size: 16px;
                color: #222222;
                font-weight: 400;
                line-height: 22px;
            }
        }

        /* 表单输入区域 */
        :deep(.form-box) {
            .submit-box {
                margin-top: 90px;
                width: 456px;
                height: 48px;
                background: #32C5FF;
                /* 设置按钮背景为蓝色 */
                border-radius: 8px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                color: #FFFFFF;
                /* 设置文字颜色为白色 */
                font-weight: 600;
            }

            .form-item {
                display: flex;
                align-items: center;
                width: 456px;
                height: 48px;
                background: #F8F8F8;
                /* 设置输入框背景为灰色 */
                border-radius: 8px;
                margin-bottom: 30px;
                position: relative;

                .code-btn-box {
                    position: absolute;
                    right: 0;
                    width: 151px;
                    height: 48px;
                    background: #32C5FF;
                    /* 设置验证码按钮的背景色 */
                    border-radius: 8px;
                    top: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;

                    span {
                        font-size: 16px;
                        color: #FFFFFF;
                        /* 设置按钮文字为白色 */
                    }
                }

                .error-tip {
                    position: absolute;
                    width: 140px;
                    text-align: right;
                    padding-right: 12px;
                    font-size: 14px;
                    color: #FD4C40;
                    /* 设置错误提示文字颜色为红色 */
                    line-height: 20px;
                    right: 0;
                }

                .el-input {
                    width: 380px;
                    font-size: 16px;
                    color: #222222;
                }

                .el-input__wrapper {
                    border: none;
                    box-shadow: none;
                    background: transparent;
                }

                img {
                    width: 24px;
                    height: 24px;
                    margin: 0 18px;
                }
            }
        }
    }

    /* 背景圆圈样式 */
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        bottom: 0;
        right: 0;
        background: rgba(255, 255, 255, .8);
        z-index: 1;
        content: '';
    }

    /* 橙色大圆圈 */
    .orange {
        background: #F0714A;
        width: 498px;
        height: 498px;
        border-radius: 50%;
        opacity: 0.67;
        filter: blur(50px);
        left: 14.2%;
        top: 41%;
        position: absolute;
    }

    /* 蓝色大圆圈 */
    .blue {
        width: 334px;
        height: 334px;
        background: #32C5FF;
        opacity: 0.67;
        filter: blur(50px);
        left: 14.2%;
        top: 42%;
        position: absolute;

        &.small {
            width: 186px;
            height: 186px;
            top: 8.2%;
            left: 58.2%;
        }
    }
}
</style>